<template>
    <div class="job-jd-page">
        <div class="setting-page-right-title">
            <div class="setting-right-name">
                <div class="setting-top-name">职位JD</div>
                <div class="setting-bottom-line"></div>
            </div>
        </div>
        <div class="job-jd-page-content">
            <div class="jd-information">
                <job-title number="1" title="职位基本信息"></job-title>
                <div style="color:rgba(255, 115, 0, 1);" class="infromation-sub sub-text">职位名称、执业类型在确认发布成功后，将无法修改</div>
                <el-form label-width="130px" label-position="right">
                    <el-form-item label="职位名称：" required>
                        <el-input :disabled="disabledNum>=2" class="theme-input main-w291" placeholder="请输入职位名称"
                                  maxlength="15"
                                  v-model="params.name"></el-input>
                    </el-form-item>
                    <el-form-item label="招聘人数：" required>
                        <el-input class="theme-input main-w291" placeholder="请输入招聘人数" type="number"
                                  v-model="params.number"></el-input>
                    </el-form-item>
                    <el-form-item label="职位年薪：" required>
                        <el-row style="width:450px;">
                            <el-col :span="4">
                                <el-input min="10" class="theme-input s-input" v-model="params.moneyLow"
                                          type="number"></el-input>
                                &nbsp;-
                            </el-col>
                            <el-col :span="5">
                                <el-input class="theme-input s-input" v-model="params.moneyHigh"
                                          type="number"></el-input>&nbsp;W/
                            </el-col>
                            <el-col :span="5">
                                <el-input class="theme-input s-input" v-model="params.year" type="number"></el-input>&nbsp;年
                            </el-col>
                            <el-col :span="10">
                                <el-radio v-model="params.radio" label="0">税前</el-radio>
                                <el-radio v-model="params.radio" label="1">税后</el-radio>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="工作地点：" required>
                        <el-cascader
                                class="main-w291"
                                :options="options"
                                v-model="params.city"
                                @change="handleChange"
                        >
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-input class="theme-input long-input" placeholder="请输入详细地址"
                                  v-model="params.detail_addr"></el-input>
                    </el-form-item>
                    <el-form-item label="面试反馈时间：" required>
                        <el-select class="main-w291" v-model="params.time" placeholder="请选择">
                            <el-option
                                    v-for="item in serverOptions[38]"
                                    :key="item.id"
                                    :label="item.content"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="保证期：" required>
                        <el-select class="main-w291" v-model="params.guarantee" placeholder="请选择">
                            <el-option
                                    v-for="item in serverOptions[39]"
                                    :key="item.id"
                                    :label="item.content"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="jd-ask">
                <job-title number="2" title="职位要求"></job-title>
                <el-form label-width="130px" label-position="right">
                    <el-form-item label="职位描述：" required>
                        <el-input
                                type="textarea"
                                maxlength="500"
                                v-model="params.describe"
                                class="theme-input long-textarea"
                                placeholder="请输入职位描述"
                                rows="5"
                                show-word-limit
                                @change="descChange"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="任职要求：" required>
                        <el-input
                                type="textarea"
                                v-model="params.ask"
                                class="theme-input long-textarea"
                                placeholder="请输入任职要求"
                                maxlength="500"
                                rows="5"
                                show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="执业类型：" required>
                        <el-cascader
                                :disabled="disabledNum>=2"
                                class="main-w291"
                                :options="licenseOptions"
                                v-model="params.type"
                                @change="handleLicenseChange"
                        >
                        </el-cascader>
                        <!--<el-select class="main-w291" v-model="params.type" placeholder="请选择">-->
                        <!--<el-option-->
                        <!--v-for="item in serverOptions[13]"-->
                        <!--:key="item.id"-->
                        <!--:label="item.content"-->
                        <!--:value="item.id"-->
                        <!--&gt;</el-option>-->
                        <!--</el-select>-->
                    </el-form-item>
                    <el-form-item label="职位亮点：" required>
                        <div class="sub-text">
                            请选择职位亮点，提升职位吸引力，有效增加自荐数 （最多可选择
                            <span style="color:#ff7300">5</span>个）
                        </div>
                        <div class="bright-tag">
                            <el-tag
                                    closable
                                    v-for="(item, index) in params.spot"
                                    :key="index"
                                    @close="spotDelete(item)"
                            >{{item}}
                            </el-tag>
                        </div>
                        <div>
                            <el-checkbox-group v-model="params.spot" @change="spotChange">
                                <el-checkbox
                                        v-for="(item, index) in serverOptions[16]"
                                        :key="index"
                                        :label="item.content"
                                        :value="item.id"
                                        border
                                ></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="jd-describe">
                <job-title number="3" title="人员描述"></job-title>
                <el-form label-width="130px" label-position="right">
                    <el-form-item label="工作年限" required>
                        <el-select class="main-w291" v-model="params.work_period" placeholder="请选择">
                            <el-option
                                    v-for="item in serverOptions[37]"
                                    :key="item.id"
                                    :label="item.content"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学历要求" required>
                        <el-select class="main-w291" v-model="params.edu_req" placeholder="请选择">
                            <el-option
                                    v-for="item in serverOptions[34]"
                                    :key="item.id"
                                    :label="item.content"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="jd-period">
                <job-title number title="有效期"></job-title>
                <el-form label-width="130px" label-position="right">
                    <el-form-item label="职位有效期" required>
                        <el-input :disabled="disabledNum>=3" class="theme-input main-w291" type="number" maxlength="2"
                                  placeholder="请选择输入1-90天"
                                  v-model="params.validateTime"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="doPa">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
  import jobTitle from './job-title'
  import _g from '../../assets/utils/global'
  import * as _ from 'underscore'
  import _address from '../../assets/utils/adress'
  import china from '../../assets/utils/china'

  export default {
    props: {
      disabledNum: {
        type: Number,
        default: 0
      },
      params: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    computed: {
      licenseOptions() {
        return _.map(this.serverOptions[13], t => {
          return {
            value: t.id,
            label: t.content,
            children: _.map(t.srList, o => {
              return {
                value: o.id,
                label: o.content
              }
            })
          }
        })
      }
    },
    data() {
      return {
        value: [],
        textarea: '',
        radio: '1',
        selectedOptions: '',
        options: [
          {
            value: '湖北省',
            label: '湖北省',
            children: [
              {
                value: '武汉市',
                label: '武汉市'
              },
              {
                value: '仙桃市',
                label: '仙桃市'
              },
              {
                value: '黄冈市',
                label: '黄冈市'
              },
              {
                value: '潜江市',
                label: '潜江市'
              }
            ]
          },
          {
            value: '湖南省',
            label: '湖南省',
            children: [
              {
                value: '长沙市',
                label: '长沙市'
              }
            ]
          }
        ],
        options1: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        checkedCities: [],
        serverOptions: {}
      }
    },
    watch: {
      params: {
        immediate: true,
        handler(n) {
          console.log('job jd param change', n)
        }
      }
    },
    methods: {
      spotDelete(t) {
        this.$emit('spot-delete', t)
      },
      descChange(s) {
        console.log('text input', s)
      },
      spotChange(v) {
        this.$emit('spot-change', v)
      },
      handleLicenseChange() {
        console.log('license', this.params.type)
      },
      handleChange() {
        console.log(this.params.city)
      },
      doPa() {
        this.$emit('input', '1')
      },
      handleClose(val) {
        this.checkedCities.splice(this.checkedCities.indexOf(val), 1)
      },
      loadOptions() {
        console.log('jd query options')
        _g.apiPost('/company/selectStaticData.do', { state: '38,39,13,16,37,34' })
          .then(res => {
            console.log('jd query options result')
            console.log(res)
            if (!_.isNull(res) && res.status === 0) {
              this.serverOptions = res.data
            }
          })
        this.options = china.chinaOptions
        console.log('china options', this.options)
      }
    },
    components: {
      jobTitle
    },
    created() {
      this.loadOptions()
    }
  }
</script>

<style lang="scss">
    .el-input__icon{
        height: auto;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
